<!--<template>-->
<!--  <div class="person">-->
<!--    <h1>情况一：监视【ref】定义的基本类型数据</h1>-->
<!--   <h2>{{sum}}</h2>-->
<!--    <button @click="Add">点我加1</button>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup name="Person">-->
<!--import { computed, ref,watch } from 'vue'-->
<!--let sum = ref(0)-->

<!--function Add(){-->
<!--  sum.value+=1-->
<!--}-->
<!--//监视-->
<!--watch(sum,(newValue,oldValue)=>{-->
<!-- console.log('sum的值发生了改变',newValue,oldValue)-->
<!--})-->
<!--</script>-->



<!--<template>-->
<!--  <div class="person">-->
<!--    <h1>情况二：监视【ref】定义的对象类型数据</h1>-->
<!--    <h2>姓名：{{person.name}}</h2>-->
<!--    <h2>年龄：{{person.age}}</h2>-->
<!--    <button @click="ChangeName">修改名字</button>-->
<!--    <button @click="ChangeAge">修改年龄</button>-->
<!--    <button @click="ChangePerson">修改对象</button>-->
<!--  </div>-->


<!--</template>-->
<!--<script setup name="Person">-->
<!--import { computed, ref,watch } from 'vue'-->
<!--let person=ref({-->
<!--  name:'小宇',-->
<!--  age:18-->
<!--})-->

<!--function ChangeName(){-->
<!--  person.value.name='xiaoyu'-->
<!--}-->
<!--function ChangeAge(){-->
<!--  person.value.age+=1-->
<!--}-->
<!--function ChangePerson(){-->
<!--  person.value={-->
<!--    name:'小福',-->
<!--    age:18-->
<!--  }-->
<!--}-->
<!--//监视，情况二：监视【ref】定义的对象类型数据，监视的是地址值，若想监视对象内部的值的变化，需要设置deep:true-->
<!--watch(person,(newValue,oldValue)=>{-->
<!--  console.log('person的值发生了改变',newValue,oldValue)-->
<!--},{deep:true,immediate:true})-->
<!--</script>-->



<!--<template>-->
<!--  <div class="person">-->
<!--    <h1>情况三：监视【reactive】定义的对象类型数据</h1>-->
<!--    <h2>姓名：{{person.name}}</h2>-->
<!--    <h2>年龄：{{person.age}}</h2>-->
<!--    <button @click="ChangeName">修改名字</button>-->
<!--    <button @click="ChangeAge">修改年龄</button>-->
<!--    <button @click="ChangePerson">修改对象</button>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup name="Person">-->
<!--import { computed, reactive,watch } from 'vue'-->
<!--let person=reactive({-->
<!--  name:'小宇',-->
<!--  age:18-->
<!--})-->

<!--function ChangeName(){-->
<!--  person.name='xiaoyu'-->
<!--}-->
<!--function ChangeAge(){-->
<!--  person.age+=1-->
<!--}-->
<!--function ChangePerson(){-->
<!--  Object.assign(person,{-->
<!--    name:'小福',-->
<!--    age:18-->
<!--  })-->
<!--}-->
<!--//监视，情况三：监视【reactive】定义的对象类型数据，且默认是开启的深度监视-->
<!--watch(person,(newValue,oldValue)=>{-->
<!--  console.log('person的值发生了改变',newValue,oldValue)-->
<!--})-->
<!--</script>-->

<!--<template>-->
<!--  <div class="person">-->
<!--    <h1>情况三：监视【reactive】定义的对象类型数据</h1>-->
<!--    <h2>姓名：{{person.name}}</h2>-->
<!--    <h2>年龄：{{person.age}}</h2>-->
<!--    <h2>其他信息：{{person.others}}</h2>-->
<!--    <button @click="ChangeName">修改名字</button>-->
<!--    <button @click="ChangeAge">修改年龄</button>-->
<!--    <button @click="ChangePerson">修改对象</button>-->
<!--    <button @click="ChangeOthers">修改其他信息</button>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup name="Person">-->
<!--import { computed, reactive,watch } from 'vue'-->
<!--let person=reactive({-->
<!--  name:'小宇',-->
<!--  age:18,-->
<!--  others:{-->
<!--    one:'小福',-->
<!--    two:21,-->
<!--  }-->
<!--})-->

<!--function ChangeName(){-->
<!--  person.name='xiaoyu'-->
<!--}-->
<!--function ChangeAge(){-->
<!--  person.age+=1-->
<!--}-->
<!--function ChangePerson(){-->
<!--  Object.assign(person,{-->
<!--    name:'小福',-->
<!--    age:18-->
<!--  })-->
<!--}-->
<!--function ChangeOthers(){-->
<!--  Object.assign(person.others,{-->
<!--    one:'小宇',-->
<!--    two:21,-->
<!--  })-->
<!--}-->
<!--//监视，情况四：监视【reactive】定义的对象类型数据中某个数据-->
<!--watch(()=>person.age,(newValue,oldValue)=>{-->
<!--  console.log('person的值发生了改变',newValue,oldValue)-->
<!--})-->
<!--watch(()=>person.others,(newValue,oldValue)=>{-->
<!--  console.log('person的值发生了改变',newValue,oldValue)-->
<!--})-->
<!--</script>-->


<template>
  <div class="person">
    <h1>情况三：监视【reactive】定义的对象类型数据</h1>
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>其他信息：{{person.others}}</h2>
    <button @click="ChangeName">修改名字</button>
    <button @click="ChangeAge">修改年龄</button>
    <button @click="ChangePerson">修改对象</button>
    <button @click="ChangeOthers">修改其他信息</button>
  </div>
</template>

<script setup name="Person">
import { computed, reactive,watch } from 'vue'
let person=reactive({
  name:'小宇',
  age:18,
  others:{
    one:'小福',
    two:21,
  }
})

function ChangeName(){
  person.name='xiaoyu'
}
function ChangeAge(){
  person.age+=1
}
function ChangePerson(){
  Object.assign(person,{
    name:'小福',
    age:18
  })
}
function ChangeOthers(){
  Object.assign(person.others,{
    one:'小宇',
    two:21,
  })
}
//监视，情况五：监视上述的多个数据
watch([()=>person.age,person.others],(newValue,oldValue)=>{
  console.log('person的值发生了改变',newValue,oldValue)
})
</script>
<style>
.person {
  background-color: burlywood;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
  color: black; /* 设置字体颜色为黑色 */
}
</style>
